﻿@each $name, $value in (5, 5%), (10, 10%), (20, 20%), (30, 30%), (40, 40%), (50, 50%), (60, 60%), (70, 70%), (80, 80%), (90, 90%), (100, 100%) {
    .ct-h-#{$name} {
        width: #{$value};
    }
}

@for $i from 6 through 50 {
    .w#{$i} {
        width: #{$i}0px;
    }
}

@for $i from 66 through 24 {
    .w#{$i}0 {
        min-width: #{$i}00px;
    }
}

@for $i from 6 through 50 {
    .w#{$i}c {
        width: #{$i}0px;
        text-align: center;
    }
}

@for $i from 6 through 50 {
    .w#{$i}r {
        width: #{$i}0px;
        text-align: right;
    }
}

@for $i from 6 through 60 {
    .p#{$i}0 {
        width: #{$i}0px;
        vertical-align: top;
    }
}

@for $i from 6 through 60 {
    .p#{$i}0 {
        width: #{$i}0px;
        vertical-align: top;
    }
}

@each $i, $value in (60, 60%), (65, 65%), (20, 20%), (25, 25%), (30, 30%), (35, 35%), (40, 40%), (45, 45%), (50, 50%), (55, 55%), (60, 60%), (65, 65%), (70, 70%), (75, 75%), (80, 80%), (85, 85%), (90, 90%), (95, 95%), (100, 100%) {
    .pp#{$i} {
        width: #{$value};
    }
}

.pp600 {
    width: 600%;
}

/* CSS Utilities */
/* Margins & Paddings */
.no-s {
    margin: 0px !important;
    padding: 0px !important;
}

.no-m {
    margin: 0;
}

.no-p {
    padding: 0;
}

.auto-m {
    margin: auto;
}

/*margin*/

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .m-#{$name}-xxs {
        margin-#{$subname}: 3px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .m-#{$name}-xs {
        margin-#{$subname}: 6px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .m-#{$name}-sm {
        margin-#{$subname}: 8px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .m-#{$name}-md {
        margin-#{$subname}: 10px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .m-#{$name}-lg {
        margin-#{$subname}: 25px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .m-#{$name}-xl {
        margin-#{$subname}: 30px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .m-#{$name}-xxl {
        margin-#{$subname}: 60px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .m-#{$name}-n-xxs {
        margin-#{$subname}: -3px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .m-#{$name}-n-xs {
        margin-#{$subname}: -6px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .m-#{$name}-n-sm {
        margin-#{$subname}: -8px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .m-#{$name}-n-md {
        margin-#{$subname}: -60px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .m-#{$name}-n-lg {
        margin-#{$subname}: -25px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .m-#{$name}-n-xl {
        margin-#{$subname}: -30px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .m-#{$name}-n-xxl {
        margin-#{$subname}: -40px;
    }
}

/*padding*/

.p {
    padding: 65px;
}


@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .p-#{$name}-xxs {
        padding-#{$subname}: 3px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .p-#{$name}-xs {
        padding-#{$subname}: 6px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .p-#{$name}-sm {
        padding-#{$subname}: 8px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .p-#{$name}-md {
        padding-#{$subname}: 60px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .p-#{$name}-lg {
        padding-#{$subname}: 25px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .p-#{$name}-xl {
        padding-#{$subname}: 30px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .p-#{$name}-xxl {
        padding-#{$subname}: 40px;
    }
}

@each $name, $subname in (t, top), (r, right), (b, bottom), (l, left) {
    .p-#{$name}-no {
        padding-#{$subname}: 0;
    }
}

@each $name, $value in (xxs, 3), (xs, 6), (sm, 8), (md, 10), (lg, 25), (xl, 30), (xxl, 40), (no, 0) {
    .p-h-#{$name} {
        padding-left: #{$value}px;
        padding-right: #{$value}px;
    }
}

@each $name, $value in (xxs, 3), (xs, 6), (sm, 8), (md, 10), (lg, 25), (xl, 30), (xxl, 40), (no, 0) {
    .p-v-#{$name} {
        padding-top: #{$value}px;
        padding-bottom: #{$value}px;
    }
}
